<template>
  <div class>
    <el-card style="position:relative;">
      <el-form :model="searchForm" label-width="80px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="业务品种" size="small">
              <el-select v-model="searchForm.serviceType" placeholder="请选择业务品种" style="width: 100%;">
                <el-option label="请选择" value=""></el-option>
                <el-option label="融资性担保" value="1"></el-option>
                <el-option label="非融资性担保" value="2"></el-option>
                <el-option label="综合授信" value="3"></el-option>
                <el-option label="委托贷款" value="4"></el-option>
                <el-option label="再担保业务" value="5"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="资料类型" size="small">
              <el-select v-model="searchForm.mateType" placeholder="请选择项目来源" style="width: 100%;">
                <el-option label="请选择" value=""></el-option>
                <el-option label="基础材料" value="1"></el-option>
                <el-option label="反担保物材料" value="2"></el-option>
                <el-option label="法律文书" value="3"></el-option>
                <el-option label="保后材料" value="4"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="资料类别" size="small">
              <el-select v-model="searchForm.mateCategory" placeholder="请选择资料类别" style="width: 100%;">
                <el-option label="请选择" value=""></el-option>
                <el-option label="企业材料" value="1"></el-option>
                <el-option label="相关报告" value="2"></el-option>
                <el-option label="个人反担保" value="3"></el-option>
                <el-option label="企业反担保" value="4"></el-option>
                <el-option label="抵质押物" value="5"></el-option>
                <el-option label="合同" value="6"></el-option>
                <el-option label="保后报告" value="7"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
     
          <el-col :span="2">
            <el-button type="primary" size="small" style="margin-left:5px" icon="el-icon-search" @click="init">查询</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-table :data="tableData" border style="width: 100%" size="mini">
      <el-table-column type="index" label="序号" align="center" width="50">
      </el-table-column>
      <el-table-column prop="mateCode" label="资料编号" align="center" width="120">
      </el-table-column>
      <el-table-column prop="mateName" label="资料名称" align="center" width="300">
      </el-table-column>
      <el-table-column prop="mateType" label="资料类型" align="center" :formatter="mateTypeFor">
      </el-table-column>
      <el-table-column prop="mateCategory" label="资料类别" align="center" :formatter="mateCategoryFor">
      </el-table-column>
      <el-table-column prop="mateLevel" label="资料级别" align="center" :formatter="mateLevelFor">
      </el-table-column>
      <el-table-column prop="isUse" label="是否采用" align="center">
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.isUse" @change="checkedIsUse(scope.row)"></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column prop="isMust" label="是否必备" align="center">
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.isMust" @change="checkedIsMust(scope.row)"></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column prop="isOriginal" label="是否原件" align="center">
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.isOriginal" @change="checkedIsOriginal(scope.row)"></el-checkbox>
        </template>
      </el-table-column>

      <!-- <el-table-column label="操作" align="center" width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
        </template>
      </el-table-column> -->
    </el-table>
    <el-card style="text-align:right;">
      <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page="currentPage" :page-sizes="[ 10, 20,30, 40]" :page-size="pageSize" background layout="total, sizes, prev, pager, next" :total="total"></el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      total: 0,
      pageSize: 10,
      currentPage: 1,
      tableData: [],
      searchForm: {
        serviceType: "",
        mateType: "",
        mateCategory: ""
      }
    };
  },
  computed: {},
  mounted() {
    this.init();
  },
  methods: {
    checkedIsUse(row) {
      let params = {
        isUse: row.isUse,
        id: row.id
      };
      this.$api
        .formPost(
            "/api/biz/baseMaterial/upDateBaseMaterial",
          params
        )
        .then(res => {
          if (res.retHead.code === "0000000") {
            this.$message({
              message: "设置成功",
              type: "success"
            });
          } else {
            this.$message.error("设置失败");
          }
        });
    },
    checkedIsMust(row) {
      let params = {
        isMust: row.isMust,
        mateRefId: row.mateRefId
      };
      this.$api
        .formPost(
            "/api/biz/baseMaterial/upDateBaseMaterialRef",
          params
        )
        .then(res => {
          console.log(res);
          if (res.retHead.code === "0000000") {
            this.$message({
              message: "设置成功",
              type: "success"
            });
          } else {
            this.$message.error("设置失败");
          }
        });
    },
    checkedIsOriginal(row) {
      let params = {
        isOriginal: row.isOriginal,
        mateRefId: row.mateRefId
      };
      this.$api
        .formPost(
            "/api/biz/baseMaterial/upDateBaseMaterialRef",
          params
        )
        .then(res => {
          console.log(res);
          if (res.retHead.code === "0000000") {
            this.$message({
              message: "设置成功",
              type: "success"
            });
          } else {
            this.$message.error("设置失败");
          }
        });
    },
    //table翻译 资料类型
    mateTypeFor: function(row, column) {
      return row.mateType == "1"
        ? "基础材料"
        : row.mateType == "2"
          ? "反担保物材料"
          : row.mateType == "3" ? "法律文书" : "保后材料";
    },
    //table翻译 资料类别
    mateCategoryFor: function(row, column) {
      return row.mateCategory == "1"
        ? "企业材料"
        : row.mateCategory == "2" ? "相关报告" : "暂无";
    },
    //table翻译 资料级别
    mateLevelFor: function(row, column) {
      return row.mateLevel == "1"
        ? "一级"
        : row.mateLevel == "2" ? "二级" : "暂无";
    },
    handleClick(row) {
      console.log(row);
    },
    sizeChange(n) {
      this.pageSize = n;
      this.init();
    },
    currentChange(n) {
      this.currentPage = n;
      this.init();
    },
    init() {
      let params = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        serviceType: this.searchForm.serviceType,
        mateType: this.searchForm.mateType,
        mateCategory: this.searchForm.mateCategory
      };
      this.$api
        .formPost(
            "/api/biz/baseMaterial/doGetMateRefList",
          params
        )
        .then(res => {
          if (res.retHead.code === "0000000") {
            for (var idx in res.retBody.list) {
              if (res.retBody.list[idx].isUse == "1") {
                res.retBody.list[idx].isUse = true;
              } else {
                res.retBody.list[idx].isUse = false;
              }
              if (res.retBody.list[idx].isMust == "1") {
                res.retBody.list[idx].isMust = true;
              } else {
                res.retBody.list[idx].isMust = false;
              }
              if (res.retBody.list[idx].isOriginal == "1") {
                res.retBody.list[idx].isOriginal = true;
              } else {
                res.retBody.list[idx].isOriginal = false;
              }
            }
            this.tableData = res.retBody.list;
            console.log(this.tableData);
            this.total = res.retBody.total;
          }
        });
    }
  },
  created() {}
};
</script>
<style lang='scss' scoped>
.btns {
  text-align: right;
}
.icon-arrow {
  position: absolute;
  bottom: 5px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #f1f1f1;
  i {
    background-color: #fff;
    position: absolute;
    color: #999;
    bottom: -7px;
    margin-left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
  }
}
</style>